<template>
	<!-- 表格 -->
	<div class="tables">
    <!-- rowStyle行样式函数 -->
		<el-table ref="multipleTable" stripe :data="tableData" tooltip-effect="dark" style="width: 100%" row-key="id"  :row-class-name="rowStyle"
			@selection-change="handleSelectionChange" @sort-change="sortChange" @select="selectChange"
			@row-click="handleRowClick" @select-all="selectAll">
			<el-table-column prop="name" width="60" align="center" key="col_0" v-if="isShowTrag == true">
				<i title="可拖动排序" class="el-icon-rank"></i>
			</el-table-column>
			<el-table-column type="selection" v-if="isShowSelection == true"></el-table-column>
			<el-table-column :index="indexMethod" label="序号" type="index" width="50" align="center" v-if="isSort == false">
			</el-table-column>
			<template v-for="(col, idx) in columList">
				<el-table-column v-if="columList[idx].isShow" :prop="col.prop" :key="idx" :label="col.name"
					:min-width="col.width" align="center" :sortable="col.sortable">
					<template slot-scope="scope">
						<div v-if="col.isFormats">
							<span v-html="xbFormatter(scope.row[scope.column.property], scope.column.property)"></span>
						</div>
						<div v-else-if="col.isFormatsFun">
							<span v-html="xbFormatterFun(scope.row, col.isFormatsFun)"></span>
						</div>
						<div v-else>
							<div v-if="col.isImg">
								<a @click="seeImg(scope.row[col.linkColumn])" target="_blank">
									<img :src="scope.row[col.linkColumn]" alt="" class="tablesImg" />
								</a>
							</div>
							<div v-else-if="col.isTextOut" class="text-ellipsis">
								<span v-html="scope.row[scope.column.property]"></span>
							</div>
							<div v-else-if="col.isStatus" class="text-ellipsis">
								<span>
									{{ scope.row[scope.column.property] == 0 ? '已下架' : scope.row[scope.column.property] == 1
										? '待审核' :
										scope.row[scope.column.property] == 2 ? '审核通过' : scope.row[scope.column.property] == 3 ?
											'审核未通过' :
											'制作中' }}
								</span>
							</div>
							<div v-else-if="col.isTextOutTwo" class="overflow">
								{{ scope.row[scope.column.property] }}
							</div>
							<div v-else-if="col.isLink" class="overflow">
								<a :href="scope.row[col.linkColumn]" target="_blank">{{
									scope.row[scope.column.property]
								}}</a>
							</div>
							<div v-else-if="col.isHtml">
								<div v-html="scope.row[scope.column.property]" class="isHtml"></div>
							</div>
							<div v-else-if="col.isHtmlTextTwo" class="overflow">
								<div v-html="scope.row[scope.column.property]" class="isHtml"></div>
							</div>
							<div v-else-if="col.isMP4">
								<a @click="openMp4(scope.row[col.linkColumn])">
									{{ scope.row[scope.column.property] }}
								</a>
							</div>
							<div v-else-if="col.splitStr">
								<span v-html="moreColumnSplit(
									scope.row,
									scope.column.property,
									col.splitStr
								)
									"></span>
							</div>
							<div v-else>
								<span v-if="col.timeFormat == 'dateYMD'">
									{{ scope.row[scope.column.property] }}</span>
								<span v-else-if="col.timeFormat == 'dateYMD_cn'">
									{{ scope.row[scope.column.property] }}</span>
								<span v-else-if="col.timeFormat == 'dateYMDHms'">
									{{ scope.row[scope.column.property] }}</span>
								<span v-else-if="col.timeFormat == 'dateYMDHms_cn'">
									{{ scope.row[scope.column.property] }}</span>
								<span v-else-if="col.timeFormat == 'dateYMDHm'">
									{{ scope.row[scope.column.property] }}</span>
								<span v-else-if="col.timeFormat == 'dateYMDHm_cn'">
									{{ scope.row[scope.column.property] }}</span>
								<span v-else-if="!col.timeFormat">
									<div v-if="col.inputFormat">
										<!-- 列表输入框 -->
										<el-input v-if="scope.row.vVisible == true"
											v-model.number.trim="scope.row[scope.column.property]" size="small"
											@blur="sendInput(scope.row)" placeholder="请输入" v-focus></el-input>
										<div v-else @click="isEdit(scope.row)" style="cursor: pointer;">
											{{ scope.row[scope.column.property] }}
										</div>
									</div>
									<div v-else>{{ scope.row[scope.column.property] }}</div>
								</span>
							</div>
						</div>
					</template>
				</el-table-column>
			</template>
			<!-- logo模块 -->
			<template v-if="logos.length > 0">
				<el-table-column label="logo" :min-width="minWidthLogo" align="center" fixed="right">
					<template slot-scope="scope">
						<template v-for="(op, idx) in logos">
							<template v-if="op.isFuntion">
								<template v-if="returnFun(op.optionFun, scope.row) == true">
									<a :key="idx" :class="'el_link ' + op.class" @click="bindClick(op.option, scope.row)">{{
										op.name }}</a>
								</template>
							</template>
							<template v-else>
								<template v-if="op.field">
									<template v-if="op.field.then">
										<template v-if="op.field.then == 'notEquals' &&
											scope.row[op.field.name] != op.field.value
											">
											<a :key="idx" :class="'el_link ' + op.class"
												@click="bindClick(op.option, scope.row)">{{ op.name
												}}</a>
										</template>
										<template v-if="op.field.then == 'greater' &&
											scope.row[op.field.name] > op.field.value
											">
											<a :key="idx" :class="'el_link ' + op.class"
												@click="bindClick(op.option, scope.row)">{{ op.name
												}}</a>
										</template>
										<template v-if="op.field.then == 'less' &&
											scope.row[op.field.name] < op.field.value
											">
											<a :key="idx" :class="'el_link ' + op.class"
												@click="bindClick(op.option, scope.row)">{{ op.name
												}}</a>
										</template>
									</template>
									<template v-else>
										<template v-if="scope.row[op.field.name] == op.field.value">
											<a :key="idx" :class="'el_link ' + op.class"
												@click="bindClick(op.option, scope.row)">{{ op.name
												}}</a>
										</template>
									</template>
								</template>
								<template v-else>
									<a :key="idx" :class="'el_link ' + op.class" @click="bindClick(op.option, scope.row)">{{
										op.name }}</a>
								</template>
							</template>
						</template>
					</template>
				</el-table-column>
			</template>
			<!-- 基础操作模块 -->
			<template v-if="baseOption.length > 0">
				<el-table-column label="基础操作" :min-width="minWidthbase" align="center" fixed="right">
					<template slot-scope="scope">
						<template v-for="(op, idx) in baseOption">
							<template v-if="op.isFuntion">
								<template v-if="returnFun(op.optionFun, scope.row) == true">
									<a :key="idx" :class="'el_link ' + op.class" @click="bindClick(op.option, scope.row)">{{
										op.name }}</a>
								</template>
							</template>
							<template v-else>
								<template v-if="op.field">
									<template v-if="op.field.then">
										<template v-if="op.field.then == 'notEquals' &&
											scope.row[op.field.name] != op.field.value
											">
											<a :key="idx" :class="'el_link ' + op.class"
												@click="bindClick(op.option, scope.row)">{{ op.name
												}}</a>
										</template>
										<template v-if="op.field.then == 'greater' &&
											scope.row[op.field.name] > op.field.value
											">
											<a :key="idx" :class="'el_link ' + op.class"
												@click="bindClick(op.option, scope.row)">{{ op.name
												}}</a>
										</template>
										<template v-if="op.field.then == 'less' &&
											scope.row[op.field.name] < op.field.value
											">
											<a :key="idx" :class="'el_link ' + op.class"
												@click="bindClick(op.option, scope.row)">{{ op.name
												}}</a>
										</template>
									</template>
									<template v-else>
										<template v-if="scope.row[op.field.name] == op.field.value">
											<a :key="idx" :class="'el_link ' + op.class"
												@click="bindClick(op.option, scope.row)">{{ op.name
												}}</a>
										</template>
									</template>
								</template>
								<template v-else>
									<a :key="idx" :class="'el_link ' + op.class" @click="bindClick(op.option, scope.row)">{{
										op.name }}</a>
								</template>
							</template>
						</template>
					</template>
				</el-table-column>
			</template>
			<!-- 操作模块 -->
			<template v-if="options.length > 0">
				<el-table-column label="操作" :min-width="minWidth" align="center" fixed="right">
					<template slot-scope="scope">
						<template v-for="(op, idx) in options">
							<template v-if="op.isFuntion">
								<template v-if="returnFun(op.optionFun, scope.row) == true">
									<i :class="[op.icon, 'el_link ' + op.class]" v-if="op.icon"
										@click="bindClick(op.option, scope.row)" :title="op.name"></i>
                  <img :src="op.zdyicon" alt="" :title="op.name"  :class="'el_link ' + op.class" v-else-if="op.zdyicon" @click="bindClick(op.option, scope.row)" style="margin-top: 2px">
									<a :key="idx" :class="'el_link ' + op.class" @click="bindClick(op.option, scope.row)"
										v-else>{{
											op.name }}</a>
								</template>
							</template>
							<template v-else>
								<template v-if="op.field">
									<template v-if="op.field.then">
										<template v-if="op.field.then == 'notEquals' &&
											scope.row[op.field.name] != op.field.value
											">
											<a :key="idx" :class="'el_link ' + op.class"
												@click="bindClick(op.option, scope.row)">{{ op.name
												}}</a>
										</template>
										<template v-if="op.field.then == 'greater' &&
											scope.row[op.field.name] > op.field.value
											">
											<a :key="idx" :class="'el_link ' + op.class"
												@click="bindClick(op.option, scope.row)">{{ op.name
												}}</a>
										</template>
										<template v-if="op.field.then == 'less' &&
											scope.row[op.field.name] < op.field.value
											">
											<a :key="idx" :class="'el_link ' + op.class"
												@click="bindClick(op.option, scope.row)">{{ op.name
												}}</a>
										</template>
									</template>
									<template v-else>
										<template v-if="scope.row[op.field.name] == op.field.value">
											<i :class="[op.icon, 'el_link ' + op.class]" v-if="op.icon"
												@click="bindClick(op.option, scope.row)" :title="op.name"></i>
                      <img :src="op.zdyicon" alt="" :title="op.name"  :class="'el_link ' + op.class" v-else-if="op.zdyicon" @click="bindClick(op.option, scope.row)">
											<a :key="idx" :class="'el_link ' + op.class" v-else
												@click="bindClick(op.option, scope.row)">{{ op.name
												}}</a>
										</template>
									</template>
								</template>
								<template v-else>
									<template v-if="op.name == '下架'">
										<a :key="idx" :class="'el_link ' + op.class"
											@click="bindClick(op.option, scope.row)">{{ scope.row.status == 2 ? op.name :
												'' }}</a>
									</template>
									<template v-else>
										<i :class="[op.icon, 'el_link ' + op.class]" v-if="op.icon"
											@click="bindClick(op.option, scope.row)" :title="op.name"></i>
                    <img :src="op.zdyicon" alt="" :title="op.name"  :class="'el_link ' + op.class" v-else-if="op.zdyicon" @click="bindClick(op.option, scope.row)">
										<a :key="idx" :class="'el_link ' + op.class" v-else
											@click="bindClick(op.option, scope.row)">{{ op.name }}</a>
									</template>
								</template>
							</template>
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>

		<!-- <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" title="预览" width="1000px">
      <VueVideo :videoSrc="videoUrl" poster=""></VueVideo>
    </el-dialog> -->

    <el-dialog title="查看" :visible.sync="seeVisible" width="666px" append-to-body>
      <el-image style="width:100% ;max-height: 60vh;overflow-y: auto;" :src="coverUrl"  :preview-src-list="[coverUrl]"> </el-image>
    </el-dialog>
	</div>
</template>

<script>
// import Vuevideo from "../vueVideo/index.vue";

export default {
	// components: {
	//   Vuevideo,
	// },

	props: {
		tableData: [Array],
		typeUser: [String],
		minWidth: [Number],
		minWidthLogo: [Number],
		minWidthbase: [Number],
		columList: {
			default: function () {
				return [];
			},
		},
		sort: {
			default: function () {
				return [];
			},
		},
    rowStyle: {  //行样式函数
      default: function () {
				return '';
			},
    },
		logos: {
			default: function () {
				return [];
			},
		},

		baseOption: {
			default: function () {
				return [];
			},
		},
		options: {
			default: function () {
				return [];
			},
		},
		formatters: {
			default: function () {
				return {};
			},
		},
		isShowTrag: {
			default: function () {
				return false;
			},
		},
		isShowSelection: {
			default: function () {
				return false;
			},
		},

		isSort: {
			default: function () {
				return false;
			},
		},
		pageNum: Number,
		pageSize: Number,
	},
	directives: {
		//注册一个局部的自定义指令 v-focus，输入框自动聚焦
		focus: {
			inserted: function (el) {
				el.querySelector("input").focus();
			},
		},
	},
	data() {
		return {
			newSort: this.sort,
			dialogVisible: false,
      seeVisible: false,
			videoUrl: "",
      coverUrl:''
		};
	},
	mounted() {
		this.rowDrop();
	},
	methods: {
		openMp4(val) {
			if (val && val !== "") {
				this.videoUrl = val;
				this.dialogVisible = true;
			}
		},

    seeImg(val){
      if (val && val !== "") {
          this.coverUrl = val
          this.seeVisible = true
			}
    },
		indexMethod(index) {
			return (this.pageNum - 1) * this.pageSize + index + 1;
		},
		toggleSelection(rows) {
			if (rows) {
				rows.forEach((row) => {
					this.$refs.multipleTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
		},
		returnFun(optionFun, row) {
			let result = null;
			this.$emit(optionFun, row, function (val) {
				result = val;
			});
			return result;
		},
		handleSelectionChange(val) {
			this.$emit("handleSelectionChange", val);
		},
		selectChange(val) {
			this.$emit("selectChange", val);
		},
		handleRowClick(val) {
			this.$emit("handleRowClick", val);
		},
		selectAll(val) {
			this.$emit("selectAll", val);
		},
		sortChange(column) {
			this.newSort.order =
				column.order == null ?
					"" :
					column.order == "ascending" ?
						"asc" :
						"desc";
			this.newSort.prop = column.prop;
			this.$emit("sort:update", Object.assign({}, this.newSort));
			this.$emit("sortChange");
		},
		edit() {
			let v = this.$router.history.current.fullPath;
			this.$router.push(v + "/edit");
		},
		rowDrop() {
			this.$emit("rowDrop");
		},
		bindClick(option, row) {
			this.$emit(option, row);
		},
		isEdit(row) {
			this.$set(row, "vVisible", true);
		},
		sendInput(row) {
			this.$emit("inputBox", row);
			this.$set(row, "vVisible", false);
			// this.divShow = true;
			// localStorage.setItem("inputShow","false");
			// localStorage.setItem("divShow","true");
			// localStorage.setItem("input",this.input);
		},
		xbFormatter(value, prop) {
			if (Object.prototype.hasOwnProperty.call(this.formatters, prop)) {
				if (value == null || value.length == 0) {
					return "";
				}
				var strValue = value.toString().split(",");
				var returnResult = "";
				for (var j in strValue) {
					for (var k in this.formatters[prop]) {
						if (this.formatters[prop][k].value == strValue[j]) {
							returnResult += this.formatters[prop][k].name + " ";
						}
					}
				}
			}
			return returnResult;
		},
		xbFormatterFun(row, isFormatsFun) {
			let result = null;
			this.$emit(isFormatsFun, row, function (val) {
				result = val;
			});
			return result;
		},
		moreColumnSplit(row, prop, splitStr) {
			let strProp = prop.split(',');
			let value = "";
			for (var i = 0; i < strProp.length; i++) {
				value += row[strProp[i]] + splitStr
			}
			return value.substring(0, value.length - 1);
		},
	},
};
</script>

<style lang="scss">
.tables {
	/* border: 1px solid var(--bc); */
	border-top: none;
	border-bottom: none;
	/* // min-height: 200px; */
}

.el-table thead {
	color: var(--mcol);
}

.has-gutter {
	color: var(--tabHD);
}

.edit {
	color: #145fdf;
	margin-right: 10px;
	cursor: pointer;
}

.editor {
	cursor: pointer;
	color: var(--mcol);
}

.delet {
	cursor: pointer;
	margin-right: 10px;
	color: #fc1941;
}

.el-table .error_class {
    color: red;
}

.start,
.final {
	color: var(--mcol);
}

.el_link {
	// margin-left: 20px;
}

.tablesImg {
   width: 160px;
	 height: 60px;
	 object-fit: cover;
}

.el-table--scrollable-x .el-table__body-wrapper ::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

/* 滚动槽 */
.el-table--scrollable-x .el-table__body-wrapper ::-webkit-scrollbar-track {
	/* // -webkit-box-shadow: inset 0 0 6px #eee; */
	border-radius: 10px;
}

/* 滚动条滑块 */
.el-table--scrollable-x .el-table__body-wrapper ::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: #dfe0e2;
	/* // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8); */
}

.el-table--scrollable-x .el-table__body-wrapper ::-webkit-scrollbar-thumb:window-inactive {
	background: #ccc;
}

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
	background-color: #fff;
}

.text-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

.overflow {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}

.el-checkbox__inner {
	border: 1px solid #92929d;
}

.isHtml {
	img {
		max-width: 200px !important;
		max-height: 50px !important;
	}
}
</style>
